import { useEffect } from "react";
import { useHistory, useParams } from "react-router-dom";
import couponsApi from "../../api/coupons";
import {
  Card,
  Form,
  Breadcrumb,
  Space,
  Button,
  InputNumber,
  Input,
  message,
  Select,
} from "antd";
import { useNavs } from "../../hook/navs";
const { Option } = Select;
const layout = {
  labelCol: {
    span: 10,
  },
  wrapperCol: {
    span: 14,
  },
};
const validateMessages = {
  required: "必填项不能为空！",
  types: {
    number: "请输入有效的数字!",
  },
};
// eslint-disable-next-line
export default () => {
  let history = useHistory();
  //获取url中的参数
  const params = useParams();
  const couId = params._id;
  console.log(couId);
  let navsOriginId = "";
  let navsOriginName = "";
  const [{ rows }, { getAllNavs }] = useNavs();
  const [form] = Form.useForm();
  //获取某一条优惠券的全部数据
  async function getCouponInfo(_id) {
    const data = await couponsApi.getOne(_id);
    form.setFieldsValue({
      name: data.name,
      discount: data.discount,
      minMoney: data.minMoney,
      deadLine: data.deadLine,
      navsId: data.navsId.name,
    });
    navsOriginName = data.navsId.name;
    navsOriginId = data.navsId._id;
  }
  //进入页面直接执行一次，获取优惠券的数据
  useEffect(() => {
    getCouponInfo(couId);
  });
  useEffect(() => {
    getAllNavs();
  }, [getAllNavs]);
  // 修改按钮的事件
  const onFinish = async (coupon) => {
    coupon._id = couId;
    if (coupon.navsId === navsOriginName) {
      coupon.navsId = navsOriginId;
    }
    await couponsApi.changeOne(coupon);
    message.success({
      content: "修改优惠券信息成功，即将跳转至优惠券列表",
      duration: 1,
      onClose: () => {
        history.push("/info/coupons");
      },
    });
  };
  //取消修改的事件
  const cancelChange = () => {
    history.push("/info/coupons");
  };
  return (
    <div className="site-card-border-less-wrapper">
      <Space direction="vertical" style={{ width: "100%" }}>
        <Card>
          <Breadcrumb>
            <Breadcrumb.Item>主页</Breadcrumb.Item>
            <Breadcrumb.Item>优惠券</Breadcrumb.Item>
            <Breadcrumb.Item>
              <a href="#/info/coupons">优惠券列表</a>
            </Breadcrumb.Item>
            <Breadcrumb.Item>修改优惠券</Breadcrumb.Item>
          </Breadcrumb>
        </Card>
        <Card style={{ height: "640px" }}>
          <Form
            {...layout}
            name="complex-form"
            onFinish={onFinish}
            validateMessages={validateMessages}
            style={{ marginTop: "100px" }}
            form={form}
          >
            <Form.Item
              name="name"
              label="优惠券名称"
              rules={[
                {
                  type: "string",
                  required: true,
                },
              ]}
            >
              <Input
                placeholder="请输入优惠券名称"
                style={{ width: "300px" }}
              />
            </Form.Item>
            <Form.Item
              name="discount"
              label="减免价格"
              rules={[
                {
                  type: "number",
                  min: 0,
                  required: true,
                  message: "减免价格至少为0!",
                },
              ]}
            >
              <InputNumber
                placeholder="请输入减免价格"
                style={{ width: "300px" }}
              />
            </Form.Item>
            <Form.Item
              name="minMoney"
              label="减免需满足的最小金额"
              rules={[
                {
                  required: true,
                  type: "number",
                  min: 0,
                  message: "满足金额至少为0!",
                },
              ]}
            >
              <InputNumber
                placeholder="请输入减免需满足的最小金额"
                style={{ width: "300px" }}
              />
            </Form.Item>
            <Form.Item
              name="deadLine"
              label="优惠券截止日期"
              rules={[
                {
                  required: true,
                },
              ]}
            >
              <InputNumber
                placeholder="请输入优惠券截止日期(例如20220101)"
                style={{ width: "300px" }}
              />
            </Form.Item>

            <Form.Item
              name="navsId"
              label="优惠券适用商品大类"
              rules={[
                {
                  required: true,
                },
              ]}
            >
              <Select
                placeholder="请选择优惠券适用商品大类"
                allowClear
                style={{ width: "300px" }}
              >
                {rows.map((item, index) => (
                  <Option key={item._id} value={item._id}>
                    {item.name}
                  </Option>
                ))}
              </Select>
            </Form.Item>

            <Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 10 }}>
              <Button
                type="primary"
                htmlType="submit"
                style={{ marginRight: "10px" }}
              >
                保存修改
              </Button>
              <Button type="primary" onClick={cancelChange} danger>
                取消修改
              </Button>
            </Form.Item>
          </Form>
        </Card>
      </Space>
    </div>
  );
};
